<!-- 商品列表 -->
<template>
  <view class="list-box">
    <view class="head-box">
      <!-- 标题栏 -->
      <u-search shape="square" action-text="" :action-style="{'display':'none'}" placeholder="请输入关键字" :inputStyle="{'width':'90%'}" @search="onSearch" @clear="clearSearch" v-model="searchVal" :showAction="false" height="70" width="95"></u-search>
    </view>
    <shopro-filter @changefilter="changefilter"></shopro-filter>
    <view class="" v-if="category_id||title=='搜索'">
      <search-data
          ref="huixuan_list"
          :enable="enable"
          :filterData="filterData"
          :title="'惠选分类商品'"
          :typeId="typeId"
          :searchVal="searchVal"
          :category_id="category_id"
      ></search-data>
    </view>
  </view>
</template>

<script>
import { mapMutations, mapActions, mapState } from 'vuex';
import ShoproFilter from "../../components/shopro-filter/shopro-filter";
let systemInfo = uni.getSystemInfoSync();
let historyTag = uni.getStorageSync('searchHistoryArr') ? JSON.parse(uni.getStorageSync('searchHistoryArr')) : [];
export default {
  components: {
    ShoproFilter
  },
  data() {
    return {
      category_id:this.$Route.query.id,
      typeId:this.$Route.query.typeId,
      enable: false, //是否开启吸顶。
      goodsList: [],
      searchVal: '',
      // 瀑布流 350-330
      addTime: 100, //排序间隙时间
      leftHeight: 0,
      rightHeight: 0,
      leftList: [],
      rightList: [],
      tempList: [],
      title:"",
      filterData:{
        defaultOrder:0,
        priceOrder:0,
        salesOrder:0,
        newProdcutOrder:0,
        filterIndex:0
      }
    };
  },
  onLoad(options) {
    //console.log('options--56--57: ',options);
    // this.category_id = this.$Route.query.id;
    //console.log("=============this.$Route.query.id",options.id,this.$Route.query.id,this.typeId,options.typeId)
    this.category_id = options.id;
    this.typeId = options.typeId;
    //console.log('this.typeId--61: ',this.typeId);
    this.title = decodeURIComponent(options.title||'搜索')
    uni.setNavigationBarTitle({
      title: this.title
    });
    console.log("===!isEmpty&&(category_id||!title)",this.category_id||this.title=='搜索')
  },
  mounted(){
    // this.category_id = this.$Route.query.id;
    // this.title = decodeURIComponent(this.$Route.query.title)
    // uni.setNavigationBarTitle({
    //   title: this.title
    // });
    // console.log("this.category_id=========",this.category_id,this.$Route.query.id)
  },
  methods: {
    // 键盘搜索,输入搜索
    onSearch() {
      this.$refs.huixuan_list.goodsList = [];
      this.$refs.huixuan_list.listParams.page = 1;
      this.$refs.huixuan_list.lastPage = 1;
      this.$refs.huixuan_list.listParams.keywords = this.searchVal;
      this.$refs.huixuan_list.listParams.typeId= this.typeId;
      this.$refs.huixuan_list.clear();
      this.$refs.huixuan_list.getGoodsList('惠选分类商品');
    },
    // 清除搜索框
    clearSearch() {
      this.searchVal = '';
      this.$refs.huixuan_list.clear();
      this.$refs.huixuan_list.getGoodsList('惠选分类商品');
    },
    changefilter(obj){
      console.log('===obj',obj)
      this.filterData = obj
    }
  }
};
</script>

<style lang="scss">
@mixin vue-flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;
  flex-direction: $direction;
  /* #endif */
}
.list-box{
  .head-box{
    padding: 14rpx;
  }
}

.u-column {
  @include vue-flex;
  flex: 1;
  flex-direction: column;
  height: auto;
}
.head-box {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 998;
  background: #fff;
}
</style>
